<template>
    <div>
        <el-card class="box-card">
            <template #header>
                <div class="card-header">
                    <span>物品信息</span>
                </div>
            </template>
            <el-form :model="data.commodityDetail" :rules="rules" ref="examineRef">
                <el-form-item label="标题" label-width="130px">
                    <el-input v-model="data.commodityDetail.title" autocomplete="off"/>
                </el-form-item>
                <el-form-item label="描述" label-width="130px">
                    <el-input :autosize="{ minRows: 10, maxRows: 10 }" v-model="data.commodityDetail.description" autocomplete="off" type="textarea"/>
                </el-form-item>
                <el-form-item label="商品原价" label-width="130px">
                    <el-input v-model="data.commodityDetail.originalPrice" autocomplete="off"/>
                </el-form-item>
                <el-form-item label="商品现价" label-width="130px">
                    <el-input v-model="data.commodityDetail.currentPrice" autocomplete="off"/>
                </el-form-item>
                <el-form-item label="商品图片" label-width="130px">
                    <div class="demo-image" v-for="image in data.commodityDetail.images" :key="image">
                        <el-image style="width: 100px; height: 100px" :src="image" fit="fit"
                                  :preview-src-list="data.commodityDetail.images"/>
                    </div>
                </el-form-item>
                <el-form-item label="审核状态" label-width="130px" prop="examineStatus">
                    <el-tag class="ml-2" type="primary" v-if="data.commodityDetail.status === 1">待审核</el-tag>
                    <el-tag class="ml-2" type="danger" v-if="data.commodityDetail.status === 2">未通过</el-tag>
                    <el-tag class="ml-2" type="success" v-if="data.commodityDetail.status === 3">上架</el-tag>
                    <el-tag class="ml-2" type="info" v-if="data.commodityDetail.status === 4">下架</el-tag>
                </el-form-item>
                <el-form-item label="最近未通过原因" label-width="130px" prop="noPassReason">
                    <el-input v-model="data.commodityDetail.lastNoPassReason" autocomplete="off" type="textarea"/>
                </el-form-item>
            </el-form>
        </el-card>
        <el-card class="box-card">
            <template #header>
                <div class="card-header">
                    <span>商品审核记录</span>
                </div>
            </template>
            <el-table :data="data.commodityExamineRecords" style="width: 100%">
                <el-table-column prop="examineAdminName" label="审核员" width="180"/>
                <el-table-column prop="examineAdminName" label="是否通过" width="180">
                    <template #default="scope">
                        <el-tag class="ml-2" type="success" v-if="scope.row.isPass">通过</el-tag>
                        <el-tag class="ml-2" type="danger" v-if="!scope.row.isPass">未通过</el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="noPassReason" label="未通过原因" width="180"/>
                <el-table-column prop="createTime" label="审核时间"/>
            </el-table>
            <el-pagination background layout="prev, pager, next" :total="data.total" @current-change="changeCurrentPage"
                           style="margin: 0 48%"/>
        </el-card>
    </div>
</template>

<script>
import {onMounted, reactive} from "vue";
import {useRoute} from "vue-router";
import {detail} from "@/api/commodity/commodity";
import {page} from "@/api/commodity/commodityExamineRecord";

export default {
    name: "lostFoundItemDetail",
    setup() {
        const data = reactive({
            commodityDetail: '',
            commodityExamineRecords: [],
            total: 0
        })
        const route = useRoute()
        const commodityDetail = async () => {
            detail(route.query.uuid).then(res => {
                data.commodityDetail = res.data
            })
        }
        const commodityExamineRecordPageParam = {
            page: 1,
            size: 10
        }
        /**
         * 分页查询商品审核记录
         */
        const pageCommodityExamineRecord = () => {
            page(commodityExamineRecordPageParam,route.query.uuid).then(res => {
                data.commodityExamineRecords = res.data.records;
                data.total = res.data.total
            })
        }
        onMounted(() => {
            commodityDetail()
            pageCommodityExamineRecord()
        })
        return {
            data,
        }
    }
}
</script>

<style scoped>
.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.text {
    font-size: 14px;
}

.item {
    margin-bottom: 18px;
}

.box-card {
    width: auto;
}
</style>